<template>
    <el-card shadow="always" class="clearfix">
        <!--条件查询-->
        <el-form :inline="true" :model="empSearch" class="demo-form-inline">
            <el-form-item label="员工姓名">
                <el-input v-model="empSearch.ename" placeholder="请输入员工姓名" />
            </el-form-item>
            <el-form-item label="员工籍贯">
                <el-input v-model="empSearch.city" placeholder="请输入员工籍贯" />
            </el-form-item>
            <el-form-item label="所在部门">
                <el-select v-model="empSearch.did" placeholder="所在部门">
                    <el-option label="所有部门" value="0" />
                    <el-option :label="d.dname" :value="d.did" v-for="d in dept"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchemp">查询</el-button>
            </el-form-item>
        </el-form>
         <!--显示查询到的所有员工数据-->
        <el-table :data="emps" style="width: 100%">
            <el-table-column label="员工编号" align="center" prop="eid"/>
            <el-table-column label="员工姓名" align="center" prop="ename"/>
            <el-table-column label="入职日期" align="center" prop="bdate"/>
            <el-table-column label="员工性别" align="center" prop="sex"/>
            <el-table-column label="员工籍贯" align="center" prop="city"/>
            <el-table-column label="所在部门" align="center" prop="dname"/>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <!--修改-->
                    <el-button type="success" @click="handleEdit(scope.$index, scope.row)" :icon="Check" circle />
                    <!--删除-->
                    <el-button type="danger" @click="handleDelete(scope.$index, scope.row)" :icon="Delete" circle />
                </template>
            </el-table-column>
        </el-table>
        <!--分页查询-->
        <el-pagination
                v-model:current-page="page"
                v-model:page-size="pageSize"
                :page-sizes="[6, 12, 18, 24]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />

    </el-card>
</template>

<script setup>
    // 引入ref
    import {ref} from 'vue'
    // 引入查询员工的方法
    import {findAllEmps,findByPage,search} from "../../api/emp";
    // 引入查询部门的方法
    import {findAllDepts} from "../../api/dept";
    // 定义员工数组
    let emps = ref([])
    // 定义员工对象
    let empSearch = ref({})
    // 引入按钮有效的代码，不加这个按钮没有用
    import {
        Check,
        Delete,
        Edit,
        Message,
        Search,
        Star,
    } from '@element-plus/icons-vue'
    // 引入分页参数
    let page = ref(1)
    let pageSize = ref(5)
    let total = ref(100)
    // 定义部门数组
    let dept = ref([])


    // 1. 查询所有员工,({data})解构函数
    const findEmps = ()=>{
        findAllEmps().then(({data})=>{
            emps.value = data.list
        })
    }
    // 2. 分页查询
    const findPage = ()=>{
        findByPage(page.value,pageSize.value).then(({data})=>{
            total.value = data.pr.total
            emps.value = data.pr.records
        })
    }
    // 3. 查询所有部门
    const findDept = ()=>{
        findAllDepts().then(({data})=>{
            dept.value = data.list
        })
    }
    // 4. 条件查询
    const searchemp = ()=>{
        search(page.value,pageSize.value,empSearch.value).then(({data})=>{
            total.value = data.pr.total
            emps.value = data.pr.records
        })
    }
    // 修改员工
    const handleEdit = (index, row) => {
        console.log(index, row)
    }
    // 删除员工
    const handleDelete = (index, row) => {
        console.log(index, row)
    }
    // 页大小改变时触发的事件
    const handleSizeChange = (val) => {
        pageSize.value = val
        //findPage()
        console.log(`${val} items per page`)
        searchemp()
    }
    // 每页大小改变时触发的事件
    const handleCurrentChange = (val) => {
        console.log(`current page: ${val}`)
        page.value = val
         //findPage()
        searchemp()
    }


    // 调用查询所有员工的方法
    //findEmps()
    // 调用分页查询的方法
    //findPage()
    // 调用查询所有部门的方法
    findDept()
    // 调用条件查询的方法
    searchemp()
</script>

<style scoped>

    .el-pagination {
        display: flex;
        justify-content: right;
        margin-top: 20px;

    }
    .el-form{
        display: flex;
        justify-content: right;
    }

</style>